import React, { useState, useRef, useEffect } from 'react';
import {
  Form, Select, Tooltip, SelectBox,
} from 'choerodon-ui/pro';
import { observer } from 'mobx-react-lite';
import { NewTips } from '@choerodon/components';
import DeployGroup from '@/routes/app-pipeline/routes/pipeline-manage/components/PipelineCreate/components/AddCDTask/components/deploy-group';

const { Option } = Select;

const Index = observer(({
  ds,
  DeployGroupDataSet,
  stageData,
  stageIndex,
  jobIndex,
  deployGroupRef,
  detailData,
  disabled,
}: any) => {
  // 这一块还不清楚作用 先加上
  const [deployGroupDetail, setDeployGroupDetail] = useState(undefined);

  useEffect(() => {
    setDeployGroupDetail(detailData);
  }, [detailData]);

  const [preJobList, setPreJobList] = useState([]);

  useEffect(() => {
    // 待修改
    getRelativeBaseOnCondition();
  }, []);

  const getRelativeBaseOnCondition = () => {
    const filterColumns = stageData?.slice(0, stageIndex + 1);
    let itemPreJobLists: any = [];
    filterColumns?.forEach((item: any, itemIndex: any) => {
      if (itemIndex + 1 <= stageIndex) {
        itemPreJobLists = [...itemPreJobLists, ...item?.jobList || []];
      } else {
        item?.jobList?.forEach((jobItem: any, jobItemIndex: any) => {
          if (jobItemIndex + 1 <= jobIndex) {
            itemPreJobLists.push(jobItem);
          }
        });
      }
    });
    setPreJobList(itemPreJobLists);
  };

  const renderer = ({ record, text }: any) => (
    <span>
      {text && (
        <i
          style={{
            display: 'inline-block',
            marginRight: 3,
            width: '0.08rem',
            height: '0.08rem',
            borderRadius: '50%',
            backgroundColor: record?.get('connected') ? 'rgb(0, 191, 165)' : '#ff9915',
          }}
        />
      )}
      {text}
    </span>
  );

  const optionRenderer = ({ record, text, value }: any) => (
    <Tooltip title={!record?.get('connected') && '未连接'}>
      {renderer({ record, text, value })}
    </Tooltip>
  );
  return (
    <>
      <Form columns={2} dataSet={ds}>
        <Select
          colSpan={1}
          name="envId"
          optionRenderer={optionRenderer}
                        // renderer={renderer}
          onOption={({ record }) => ({
            disabled: !record?.get('connected'),
          })}
          onChange={() => {
            DeployGroupDataSet?.current?.set('appName', undefined);
            DeployGroupDataSet?.current?.set('appCode', undefined);
          }}
        />
        <div
          className="addcdTask-whetherBlock addcdTask-triggersTasks"
          style={{
            position: 'relative',
          }}
            // @ts-ignore
          colSpan={3}
        >
          <SelectBox name="skipCheckPermission">
            <Option value={false}>是</Option>
            <Option value>否</Option>
          </SelectBox>
          <NewTips
            helpText="此处仅项目所有者可以设置；默认为是，即触发用户在没有该部署任务的环境权限时，将会直接使用管理员账户触发部署；若选择为否，触发成员在没有环境权限时，将会直接跳过此部署任务。"
            style={{
              position: 'absolute',
              top: '7px',
              left: '195px',
            }}
          />
        </div>
        <SelectBox
          colSpan={3}
          name="deployType"
          onChange={(value) => {
          // 待修改
            //   DeployGroupDataSet.current.set(deployGroupMapping().appName.name, undefined);
            //   DeployGroupDataSet.current.set(deployGroupMapping().appCode.name, undefined);
            if (value === 'create') {
              setDeployGroupDetail(undefined);
            }
          }}
        />
      </Form>
      <div className="addcdTask-divided" />
      <DeployGroup
        envId={ds.current?.get('envId')}
        changeDetail={setDeployGroupDetail}
        deployWay={ds.current.get('deployType')}
        detail={deployGroupDetail}
        dataSet={DeployGroupDataSet}
        cRef={deployGroupRef}
        preJobList={preJobList}
        disabled={disabled}
      />
    </>
  );
});

export default Index;
